<template>
	<view class="container" >
		<view class="search-box">
			<view class="c-input">
				<u-search
					placeholder="请输入门店或地址" 
					v-model="value" 
					:showAction="false"
					:height="64"
					bgColor="#ffffff" 
					placeholderColor="#CCCCCC"
					@search="handleSearch"
					@change="handleInput"
				>
				</u-search>
			</view>
		</view>
		<view class="c-record" v-if="!value" :style="{marginTop: `${ getSystemInfo.navBarHeight }px`}">
			<view class="cr-action">
				<text class="cra-label">搜索历史</text>
				<text class="cra-clear" @click="handleClearRecord">清除历史</text>
			</view>
		<!-- 	<view class="cr-tag">
				<view class="crt-item" v-for="item in recordList" :key="item" @click="handleTag(item)">{{ item }}</view>
			</view> -->
			<view class="cr-tag">
				<view
					class="crt-item"
					v-for="item in recordList"
					:key="item"
					@click="handleTag(item)"
				>
					<text>{{ item }}</text>
					<image
						@click.stop="handleDelete(item)"
						class="crti-ic"
						src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/circle/ic_close.png"
						mode=""
					></image>
				</view>
			</view>
		</view>
		
		<view class="c-list" v-if="showList" :style="{marginTop: `${ 48 }px`}">
			<!-- 数据列表组件 -->
			<List ref="list" :keyword="value" top="60" popupTop="86" :mapShow="false" />
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import List from '@/pages/store/components/list.vue'
	export default {
		components: {
			List
		},
		data() {
			return {
				value: '',
				recordList: [],
				showList: false
			};
		},
		computed: {
			...mapGetters('global', ['getSystemInfo'])
		},
		onShow(){
			const recordList = uni.getStorageSync('recordList');
			if(recordList){
				this.recordList = JSON.parse(recordList)
			}
		},
		methods: {
			handleClearRecord(){
				if(this.recordList.length){
					uni.showModal({
						content: '确认删除搜索历史吗?',
						confirmText: "确认",
						cancelText: "取消",
						success: res => {
							if(res.confirm){
								this.recordList = []
								uni.setStorageSync('recordList', JSON.stringify([]));
							}
						}
					})
				}
			},
			handleInput(){
				if(!this.value){
					this.showList = false
				}
			},
			handleDelete(item){
				this.recordList = this.recordList.filter(i => i !== item)
				uni.setStorageSync('recordList', JSON.stringify(this.recordList));
			},
			handleSearch() {
				if(!this.value){
					return
				}
				// 缓存到本地
				if(this.recordList.length){
					const index = this.recordList.indexOf(this.value)
					if(index !== -1){
						this.recordList.splice(index, 1)
					}
				}
				this.recordList.unshift(this.value)
				uni.setStorageSync('recordList', JSON.stringify(this.recordList));
				
				// 展示列表
				this.showList = true
				this.$nextTick(() =>{
					this.$refs.list.data = []
					this.$refs.list.total = 0
					this.$refs.list.initData()
					this.$refs.list.handleGetTagListData()
				})
			},
			handleTag(item){
				this.value = item
				this.$nextTick(() =>{
					this.handleSearch()
				})
			}
		},
		onReachBottom() {
			if (this.$refs.list.data.length >= this.$refs.list.total) {
				this.$refs.list.loadMoreText = "没有更多数据了!"
				return;
			}
			this.$refs.list.showLoadMore = true;
			this.$refs.list.formDatas.pageNum += 1
			this.$refs.list.initData()
		},
		onPullDownRefresh() {
			this.$refs.list.loadMoreText = "加载中..."
			this.$refs.list.data = []
			this.$refs.list.formDatas.pageNum = 1
			this.$refs.list.initData();
		},
	}
</script>

<style lang="scss" scoped>
.container {
	box-sizing: border-box;
	min-height: 100vh;
	background-color: #ffffff !important;
	overflow: hidden;
	.search-box {
		.c-input {
			position: fixed;
			z-index: 10;
			width: 100%;
			padding: 14rpx 20rpx;
			background-color: #F5F5F5;
			box-sizing: border-box;
			/deep/ .u-icon__icon {
				font-size: 22px !important;
			}
		}
	}

	.c-record {
		padding: 0 44rpx;
		.cr-action {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 16px;
			margin: 26rpx 0 34rpx 0;
			.cra-clear {
				font-size: 12px;
				color: $uni-primary;
			}
		}

		.cr-tag {
			display: flex;
			flex-wrap: wrap;
			.crt-item {
				width: fit-content;
				display: flex;
				align-items: center;
				font-size: 15px;
				padding: 18rpx 36rpx;
				background: #F5F5F5;
				border-radius: 4rpx;
				margin: 0 24rpx 16rpx 0;
				word-break: break-word;
				.crti-ic {
					margin-left: 8rpx;
					width: 32rpx;
					min-width: 32rpx;
					height: 32rpx;
					min-height: 32rpx;
				}
			}
		}
	}
}
</style>
